<template>
	<view class="feedback_content">
		<view v-if="userType == '监护人'">
			<view v-if="!!stuList.length" class="stu_list">
				<view class="stu_item" v-for="(item, index) in stuList" :key="index" @tap="goDetails(item)">
					<image :src="!!item.stuPhotoPath ? utils.localURL + '/' + item.stuPhotoPath : ''"></image>
					<view>
						<view class="stu_info">
							<view style="margin-right: 20px;">Student Name：{{ item.userName }}</view>
						</view>
						<view class="service_term">School Name：{{ item.schoolName }}</view>
					</view>
					<image class="item_icon" v-if="!!Number(item.isNewMes)" src="../../static/img/noReadMes.png"></image>
					<text class="iconfont_icon">&#xe630;</text>
				</view>
			</view>
			<view class="nothing" v-else><image src="../../static/img/nothing.png"></image></view>
		</view>
		<view v-else>
			<view v-if="!!guaList.length" class="stu_list">
				<view class="stu_item" v-for="(item, index) in guaList" :key="index" @tap="goDetails(item)">
					<image :src="!!item.guardianPhotoPath ? utils.localURL + '/' + item.guardianPhotoPath : txImg"></image>
					<view>
						<view class="stu_info">
							<view style="margin-right: 20px;">Guidian Name：{{ item.userName || '老师' }}</view>
						</view>
						<view class="service_term">Guidian Mobile：{{ item.guardianPhone }}</view>
					</view>
					<image class="item_icon" v-if="!!Number(item.isNewMes)" src="../../static/img/noReadMes.png"></image>
				</view>
			</view>
			<view class="nothing" v-else><image src="../../static/img/nothing.png"></image></view>
		</view>
	</view>
</template>

<script>
import api from '../../api/feedback.js';
import otherApi from '../../api/otherApi.js';
import homeApi from '../../api/homeApi.js';
import utils from '../../api/utils.js';
import txImg from '../../static/img/avatarImg.jpeg';

export default {
	data() {
		return {
			feedBackList: [],
			guaList: [],
			stuList: [],
			userType: '',
			utils: utils,
			txImg: txImg,
			userId: ''
		};
	},
	methods: {
		creatFeedback() {
			uni.redirectTo({
				url: './writeRecord?type=创建反馈'
			});
		},
		goDetails(item) {
			console.log(item);
			let _this = this;
			if (_this.userType == '监护人') {
				uni.navigateTo({
					url: `./feedbackContent?id=${item.stuFatherId}&otherId=${item.stuGurdianId}`
				});
			} else if (_this.userType == '家长') {
				uni.navigateTo({
					url: `./feedbackContent?id=${_this.userId}&otherId=${item.userId}`
				});
			}
		}
	},
	onLoad() {},
	async onShow() {
		let _this = this;
		let stuGurdianId = '';
		let token = '';
		uni.getStorage({
			key: 'userInfo',
			success(res) {
				stuGurdianId = res.data.userId;
				_this.userType = res.data.userType;
				_this.userId = res.data.userId;
			}
		});
		uni.getStorage({
			key: 'token',
			success(res) {
				token = res.data;
			}
		});
		uni.showLoading({
			title: 'Please wait...',
			mask: true
		});
		if (_this.userType == '监护人') {
			let data = await otherApi.getStuList(
				'user/getStuList',
				{
					stuGurdianId: stuGurdianId,
					current: 1,
					size: 50
				},
				token
			);
			console.log(data);
			if (data.head.status) {
				_this.stuList = data.body;
			} else {
				uni.showToast({
					title: data.head.msg,
					icon: 'none',
					duration: 2000
				});
			}
		} else if (_this.userType == '家长') {
			let gurdianData = await homeApi.getGurdianInfoByUserId(token);
			console.log(gurdianData);
			if (gurdianData.head.status) {
				_this.guaList = gurdianData.body;
			} else {
				uni.showToast({
					title: gurdianData.head.msg,
					icon: 'none',
					duration: 2000
				});
			}
		}
		uni.hideLoading();
	}
};
</script>

<style scoped>
.feedback_content {
	width: 100%;
	background-color: #fff;
	box-sizing: border-box;
}

.stu_list {
	width: 100%;
	padding: 20px 30px;
	box-sizing: border-box;
}

.stu_tel_item {
	width: 100%;
	padding: 20px 5px;
	border-bottom: solid 1px #dfdfdf;
	box-sizing: border-box;
	color: #666;
}

.stu_item {
	width: 100%;
	padding: 20px 5px;
	border-bottom: solid 1px #d82728;
	box-sizing: border-box;
	color: #0faeff;
	position: relative;
	display: flex;
	align-items: center;
}

.stu_item image {
	width: 60px;
	height: 60px;
	margin-right: 15px;
}

.stu_item .iconfont_icon {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	color: #d82728;
}

.stu_item .stu_info {
	display: flex;
	justify-content: flex-start;
	font-size: 14px;
	margin-bottom: 10px;
}

.stu_item .item_icon {
 position: absolute;
 width: 25px;
 height: 25px;
 top: 20px;
 right: 0;
}

.stu_item .service_term {
	font-size: 14px;
	color: #0599d7;
}

.feedback_list {
	width: 100%;
	background-color: #fff;
}

.feedback_item {
	padding: 15px 30px;
	box-sizing: border-box;
	border-bottom: solid 1px #d5d5d5;
	position: relative;
}

.feedback_item .ball {
	width: 10px;
	height: 10px;
	border: solid 1px #dfdfdf;
	border-radius: 50%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 7px;
	margin: auto;
}
.feedback_item:last-child {
	border-bottom: none;
}

.item_title {
	display: flex;
	justify-content: space-between;
}

.item_title > text:first-child {
	font-size: 16px;
	color: #555;
	font-weight: bold;
}

.item_title > text:last-child {
	font-size: 14px;
	color: #999;
	margin-right: 10px;
}

.feedback_tip {
	font-size: 16px;
	color: #333;
	margin: 10px 0;
}

.feedback_text {
	width: 100%;
	font-size: 16px;
	color: #999;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

.iconfont_icon {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 25px;
	height: 25px;
	margin: auto;
	color: #0599d7;
}

.add_btn {
	width: 100%;
	height: 46px;
	line-height: 46px;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
}

.nothing {
	width: 100%;
	text-align: center;
}

.nothing image {
	width: 150px;
	height: 150px;
	margin-top: 50%;
}
</style>
